<template>
  <div class="details">
    <!-- 顶部导航 -->

    <van-nav-bar left-arrow>
      <template #left> <img src="" alt="" />汇源果汁官方旗舰店 </template>
      <template #right>
        <router-link to="/all">
          <van-icon name="search" size="18" color="#a59688" />我的记录
        </router-link>
      </template>
    </van-nav-bar>

    <!-- tab标签页 -->
    <van-tabs  sticky>
      <van-tab title="商品"></van-tab>
      <van-tab title="评价"></van-tab>
      <van-tab title="推荐"></van-tab>
      <van-tab title="详情"></van-tab>
    </van-tabs>

    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      @change="onChange"
      indicator-color="white"
    >
      <van-swipe-item>
        <img src="../../assets/details/10028.webp" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/details/10029.webp" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/details/10030.webp" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/details/10031.webp" alt="" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>

    <div class="container">
      <!-- 小图 -->
      <div class="nav">
        <img src="../../assets/details/10012.webp" alt="" />
        <img src="../../assets/details/10012.webp" alt="" />
        <img src="../../assets/details/10012.webp" alt="" />
        <img src="../../assets/details/10012.webp" alt="" />
      </div>

      <!-- 价格 -->
      <div class="desc_price">
        <h2>￥49.9</h2>
        <p>价格 <span>69.9</span></p>
      </div>

      <!-- 描述 -->
      <div class="desc">
        <div class="desc_t">
          <div class="desc_right">
            <img src="../../assets/details/vip.png" alt="" />
            <span>专享会员卡原价再减￥1.00</span>
          </div>
          <div>
            <a>加入会员<van-icon name="arrow" /></a>
          </div>
        </div>
        <div class="desc_b">
          <p>汇源100%复合果汁 两联包1L*2沙棘 山楂两种口味可选</p>
          <div class="share">
            <img src="../../assets/details/fenxiang.svg" alt="" />
            <van-cell @click="showShare = true" />分享
            <!-- <van-share-sheet
              v-model="showShare"
              :options="options"
              title="立即分享给好友"
              description="描述信息"
            /> -->
          </div>
        </div>
      </div>
    </div>
    <div class="bg">
      <!-- 放心购 -->
      <div class="fangxingou">
        <div class="fangxingou_l">
          <img src="../../assets/details/fangxin-green.svg" alt="" />
          <p>品质保证·退货包运费·免费上门取退·专属客服·先行赔付</p>
        </div>
        <div class="fangxingou_r">
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 运费 -->
      <div class="fare">
        <div class="fare_l">
          <span>运费</span>
          <span>免运费</span>
        </div>
        <div class="fare_r">
          <p>已售 32 | 剩余 1968</p>
        </div>
      </div>
      <!-- 服务 -->
      <div class="server">
        <div class="server_t">
          <div class="server_l">
            <span>服务</span><span>快递发货·到店自提·收货后结算</span>
          </div>
          <div class="server_r"><van-icon name="arrow" /></div>
        </div>
        <div class="server_b">
          <div class="server_bt">
            <div class=""></div>
          </div>
          <div class="server_bb">
            <div class="server_choice">
              <div class="server_favo">
                <span>选择</span>
                <span>口味</span>
              </div>
              <div class="server_more">
                <van-icon name="arrow" />
              </div>
            </div>
            <div class="server_kexuan">
              <img src="../../assets/details/10012.webp" alt="" />
              <img src="../../assets/details/10012.webp" alt="" />
              <img src="../../assets/details/10012.webp" alt="" />
              <img src="../../assets/details/10012.webp" alt="" />
              <button>4种口味可选</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 购买 -->
      <div class="buy">
        <div class="buy_t">
          <p>26人已购买</p>
          <div buy_r><span>查看全部</span> <van-icon name="arrow" /></div>
        </div>
        <div class="buy_b">
          <div class="buyer">
            <img src="../../assets/details/10021.jpg" alt="" />
            <span>小灰灰</span>
          </div>
          <div class="buy_date">
            <p>08月09日买了1件</p>
          </div>
        </div>
        <div class="buy_b">
          <div class="buyer">
            <img src="../../assets/details/10021.jpg" alt="" />
            <span>小灰灰</span>
          </div>
          <div class="buy_date">
            <p>08月09日买了1件</p>
          </div>
        </div>
      </div>
      <!-- 评价 -->
      <div class="assess">
        <div class="assess_t">
          <p>商品评价(2)</p>
          <div class="assess_good">
            <span>好评率:100%</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="assess_b">
          <div class="assess_data">
            <div class="assess_buyer">
              <img src="../../assets/details/10021.jpg" alt="" />
              <span>小**</span>
            </div>
            <div class="assess_eval">
              <van-rate  />
            </div>
          </div>
          <!-- 假数据 -->
          <div class="assess_data">
            <div class="assess_buyer">
              <img src="../../assets/details/10021.jpg" alt="" />
              <span>小**</span>
            </div>
            <div class="assess_eval">
              <van-rate  />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 为你推荐 -->
    <div class="container">
      <!-- 店铺 -->
      <div class="store">
        <img src="../../assets/details/10001.png" alt="" />
        <div class="store_r">
          <div class="store_rt">
            <p>汇源果汁旗舰店</p>
            <div class="store_button">
              <span>关注店铺</span>
              <span>进店逛逛</span>
            </div>
          </div>
          <div class="store_rb">
            <img src="../../assets/details/10001.png" alt="" />
          </div>
        </div>
      </div>
      <div class="recommand">
        <div class="rec_t">
          <p>为你推荐</p>
          <div class="rec_more">
            <p>查看全部</p>
            <van-icon name="arrow" />
          </div>
        </div>

        <van-swipe class="my-swipe" indicator-color="#323233" :width="400">
          <van-swipe-item v-for="(item, i) in 4" :key="i">
            <div class="lunbo">
              <img src="../../assets/details/10027.webp" alt="" />
              <p>汇源100%橙汁200ml*24盒整箱装</p>
              <span>￥98</span>
            </div>
            <div class="lunbo">
              <img src="../../assets/details/10027.webp" alt="" />
              <p>汇源100%橙汁200ml*24盒整箱装</p>
              <span>￥98</span>
            </div>
            <div class="lunbo">
              <img src="../../assets/details/10027.webp" alt="" />
              <p>汇源100%橙汁200ml*24盒整箱装</p>
              <span>￥98</span>
            </div>
            <div class="lunbo">
              <img src="../../assets/details/10027.webp" alt="" />
              <p>汇源100%橙汁200ml*24盒整箱装</p>
              <span>￥98</span>
            </div>
            <div class="lunbo">
              <img src="../../assets/details/10027.webp" alt="" />
              <p>汇源100%橙汁200ml*24盒整箱装</p>
              <span>￥98</span>
            </div>
            <div class="lunbo">
              <img src="../../assets/details/10027.webp" alt="" />
              <p>汇源100%橙汁200ml*24盒整箱装</p>
              <span>￥98</span>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="gap"></div>
    <div class="container">
      <!-- 优惠券 -->
      <div class="coupon_all">
        <div class="coupon">
          <div class="coupon_item">
            <img src="../../assets/details/youhuiquan.svg" alt="" />
            <h3>15</h3>
            <span>元</span>
            <p>满199元，全部商品</p>
          </div>
        </div>
        <div class="coupon">
          <div class="coupon_item">
            <img src="../../assets/details/youhuiquan.svg" alt="" />
            <h3>15</h3>
            <span>元</span>
            <p>满199元，全部商品</p>
          </div>
        </div>
        <div class="coupon">
          <div class="coupon_item">
            <img src="../../assets/details/youhuiquan.svg" alt="" />
            <h3>15</h3>
            <span>元</span>
            <p>满199元，全部商品</p>
          </div>
        </div>
      </div>

      <!-- 商品详细 -->
      <div class="goods_details">
        <img src="../../assets/details/11066.jpg" alt="" />
        <img src="../../assets/details/11067.jpg" alt="" />
        <img src="../../assets/details/11068.jpg" alt="" />
        <img src="../../assets/details/11069.jpg" alt="" />
        <img src="../../assets/details/11070.jpg" alt="" />
        <img src="../../assets/details/11071.jpg" alt="" />
        <img src="../../assets/details/11072.jpg" alt="" />
        <img src="../../assets/details/11073.jpg" alt="" />
        <img src="../../assets/details/11074.jpg" alt="" />
        <img src="../../assets/details/11075.jpg" alt="" />
        <img src="../../assets/details/11076.jpg" alt="" />
        <img src="../../assets/details/11077.jpg" alt="" />
      </div>
    </div>

    <!-- 底部导航 -->

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />

      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />

      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />

      <van-goods-action-button
        type="danger"
        text="查看店铺其他商品"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
  import { Toast } from "vant";
  export default {
    data() {
      return {
        current: 0,
        showShare: false,
        options: [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "复制链接", icon: "link", description: "描述信息" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
        ],
      };
    },
    methods: {
      onChange(index) {
        this.current = index;
      },
      onClickIcon() {

      },
      onClickButton() {

      },
      onSelect(option) {
        Toast(option.name);
        this.showShare = false;
      },
    }
  }
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.van-icon-arrow {
  color: #969799;
}
p {
  margin: 0;
  padding: 0;
}
.details {
  height: 600px;
}
.van-swipe-item img {
  width: 100%;
  display: block;
}
.container {
  margin: 10px;
}
.custom-indicator {
  position: absolute;
  right: 15px;
  bottom: 0.9375rem;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.1);
}
.nav {
  display: flex;
  img {
    width: 2.5rem;
    margin: 0.625rem 0.3125rem;
    border-radius: 5px;
    &:nth-child(1) {
      border-radius: 0;
      padding-right: 0.75rem;
      border-right: 1px solid #efeff3;
    }
  }
}
.desc_price p > span {
  // text-decoration: line-through;
  display: inline-block;
  margin: 5px;
}
.desc_price h2 {
  color: red;
  margin: 0.3125rem;
}
.desc {
  display: flex;
  flex-direction: column;
  .desc_t {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(90deg, #fbe3ad, #e6cc94);
    margin: 0 5px;
    border-radius: 10px;
  }
  .desc_b {
    p {
      font-weight: bolder;
    }
  }
  .desc_right {
    padding: 10px 5px;
    display: flex;

    img {
      display: block;
      width: 35px;
    }
    span {
      display: inline-block;
      vertical-align: center;
      margin-left: 0.625rem;
    }
  }
  a {
    display: inline-block;
  }
  .desc_b {
    display: flex;
    margin-top: 0.625rem;
    .share {
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 1.125rem;
      img {
        width: 16px;
      }
      .van-cell {
        display: inline-block;
        width: 20%;
        padding: 0;
      }
    }
    p {
      width: 80%;
      display: inline-block;
      font-size: 1.25rem;
    }
  }
}
.gap {
  width: 100%;
  height: 0.625rem;
  background-color: #f7f8fa;
}
.bg {
  height: 660px;
  background-color: #f7f8fa;
  padding: 10px 0;
}
.fangxingou {
  background-color: #fff;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  .fangxingou_l {
    display: flex;
    flex-direction: column;
    img {
      width: 80px;
      display: block;
    }
    p {
      font-size: 16px;
    }
  }
  .fangxingou_r {
    padding: 0 10px;
  }
}
.fare {
  height: 44px;
  background-color: #fff;
  margin-top: 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  .fare_l {
    span {
      &:nth-child(1) {
        color: #969799;
        margin-right: 0.625rem;
      }
    }
  }
  .fare_r {
    p {
      color: #969799;
    }
  }
}
.server {
  height: 8.75rem;
  margin-top: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 10px;
  .server_t {
    display: flex;
    justify-content: space-between;
    .server_l {
      span {
        &:nth-child(1) {
          color: #969799;
          margin-right: 0.625rem;
        }
      }
    }
  }
  .server_b {
    margin-top: 20px;
  }
  .server_choice {
    display: flex;
    justify-content: space-between;
    .server_favo {
      span {
        &:nth-child(1) {
          color: #969799;
          margin-right: 0.625rem;
        }
      }
    }
  }
  .server_kexuan {
    margin-left: 2.5rem;
    display: flex;
    margin-top: 0.625rem;
    img {
      width: 2.5rem;
      margin-right: 0.3125rem;
      border-radius: 0.3125rem;
    }
    button {
      border: 0;
      background-color: #f7f8fa;
      padding: 10px 5px;
      border-radius: 0.3125rem;
      color: #969799;
    }
  }
}
.buy {
  height: 8.125rem;
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;
  .buy_t {
    display: flex;
    justify-content: space-between;
    p {
      font-weight: bold;
    }
  }
  .buy_b {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.625rem;
    img {
      width: 2.5rem;
      border-radius: 50%;
    }
    .buyer {
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
    }
  }
}
.assess {
  margin-top: 0.625rem;
  height: 8.75rem;
  background-color: #fff;
  display: flex;
  // justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  .assess_t {
    display: flex;
    justify-content: space-between;
  }
  .assess_b {
    .assess_data {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      .assess_buyer {
        display: flex;
        align-items: center;
        span {
          color: #969799;
        }
      }
      img {
        width: 2.8125rem;
        border-radius: 50%;
        margin-right: 0.625rem;
      }
    }
  }
  .assess_good {
    span {
      color: #969799;
    }
  }
}
.store {
  height: 3.75rem;
  background-color: #fff;
  margin-top: 0.625rem;
  display: flex;
  align-items: center;
  padding: 0.625rem;
  img:nth-child(1) {
    width: 3.75rem;
  }
  .store_r {
    margin-left: 1.25rem;
    .store_rt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .store_button {
        display: flex;
        transform: scale(0.7);
        span {
          width: 4.125rem;
          height: 1.25rem;
          border-radius: 0.625rem;
          padding: 5px 4px;
          display: inline-block;
          border: 1px solid #fc1919;
          color: #fc1919;
          &:nth-child(2) {
            margin-left: 0.625rem;
          }
        }
      }
    }
  }
  .store_rb {
    img {
      width: 50px;
      border-radius: 2px;
      margin-top: 0.3125rem;
    }
  }
}
.recommand {
  height: 430px;
  .rec_t {
    display: flex;
    border-top: 2px solid #f7f8fa;
    padding-top: 10px;
    justify-content: space-between;
    .rec_more {
      display: flex;
      align-items: center;
      p {
        color: #969799;
      }
    }
  }
  .van-swipe-item {
    height: 390px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
    margin-right: 0.9375rem;
  }
  .lunbo {
    width: 7.8125rem;
    height: 180px;
    // border: 1px solid #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    p {
      font-size: 14px;
      margin-top: 0.5rem;
    }
    span {
      display: inline-block;
      margin-top: 0.5rem;
      color: #fc1919;
    }
  }
}
.van-swipe__indicators {
  // position: absolute;
  bottom: 0;
}
.coupon_all {
  display: flex;
  justify-content: space-around;
  .coupon_item {
    color: #fff;
    position: relative;
    img {
      transform: rotate(90deg);
      width: 130px;
      height: 100px;
      display: inline-block;
    }
    h3 {
      position: absolute;
      top: 20px;
      left: 2.375rem;
      font-size: 26px;
    }
    span {
      position: absolute;
      top: 1.5625rem;
      left: 4.375rem;
      font-weight: bold;
    }
    p {
      position: absolute;
      font-size: 14px;
      transform: scale(0.7);
      top: 3.125rem;
      left: 0.1875rem;
    }
  }
}
.goods_details {
  height: 4600px;
  img {
    width: 100%;
    display: block;
  }
}
</style>
